<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref" style="width: 500px; height: 600px"></div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
export default {
  name: "Seller",
  data() {
    return {
      chartInstance: null,
      allData: [
        {name: "商家1", value: 100},
        {name: "商家2", value: 200},
        {name: "商家3", value: 300},
        {name: "商家4", value: 400},
        {name: "商家5", value: 500},
        {name: "商家6", value: 600},
        {name: "商家7", value: 700},
        {name: "商家8", value: 800},
        {name: "商家9", value: 900},
        {name: "商家10", value: 100}
      ],
      currentPage: 1,
      totalPage: 0,
      timerId: null
    }
  },
  mounted() {
    this.initEcharts();
    this.getData();
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter();
  },
  destroyed() {
    clearInterval(this.timerId)
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    //  vue中mounted为dom加载完毕
    //初始化echarts
    initEcharts() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'dark')
      const initOption = {
        title: {
          text: '▍ 小米商家销售统计',
          left: 20,
          top: 20
        },
        grid:{
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
        },
        tooltip:{
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              color: '#2D3443'
            }
          }
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'white'
              }
            },
            itemStyle: {
              barBorderRadius: [0, 33, 33, 0],
              //颜色渐变
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#5052EE'
                },
                {
                  offset: 1,
                  color: '#AB6EE5'
                }
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
      console.log(this.chartInstance)
      //对图标对象进行鼠标事件的监听
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.chartInstance.on('mouseout', () => {
        this.startInterval()
      })
    },
    //获取服务器数据
    getData() {
      //从后台获取商家数据, 暂时使用临时数据
      //     getData().then(response =>{
      //        this.data = response;
      //     })
      this.allData.sort((a, b) => {
        return a.value - b.value; //从小到大排序
      })
      this.totalPage = this.allData.length % 5 === 0 ? (this.allData.length / 5) : (this.allData.length / 5 + 1);

      this.updateChart();
      //启动定时器
      this.startInterval();
    },
    //更新图表
    updateChart() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      const showData = this.allData.slice(start, end);

      //商家
      const sellerNames = showData.map((item) => {
        console.log(item.name)
        return item.name;
      })
      //销售量
      const sellerValues = showData.map((item) => {
        console.log(item.value)
        return item.value;
      })
      const dataOption = {
        yAxis: {
          data: sellerNames
        },
        series: [
          {
            data: sellerValues
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3000)
    },
    screenAdapter(){
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6;
      const adapterOption = {
        title: {
          textStyle:{
            fontSize: titleFontSize
          },
        },
        tooltip:{
          axisPointer: {
            lineStyle: {
              width: titleFontSize
            }
          }
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize/2, titleFontSize/2, 0],
              //颜色渐变
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize();

    }
  }
}
</script>

<style scoped>
.com-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.com-chart {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
